(function ($){
    Backbone.sync = function(method, model, success, error) {
        success();
    }
    
    var Atom = Backbone.Model.extend({
        defaults: {
            position_x: 0,
            position_y: 0,
            user_id: 0,
            website_id: 0,
            comment: "",
            timestamp: null
        }
    });
    
    var Atomi = Backbone.Collection.extend({
        model: Atom
    });
    
    var AtomView = Backbone.View.extend({
       // tagName:'li',
        tagName:'div',
        className:'Atom_View',
        
        events: {
            'click span.delete':'remove'
        },
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'remove');
            
            this.model.bind('remove', this.unrender);
        },
        render: function() {
            $(this.el).html('<div class="Atom_View_Author">'+this.model.get('user_id')+'</div><div class="Atom_View_Comment">'+this.model.get('comment')+'</div><div class="Atom_View_Position">'+this.model.get('position_x')+' '+this.model.get('position_y')+'<br>'+this.model.get('timestamp')+'</div><span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[X]</span>');
            $(this.el).css('top', this.model.get('position_y')+'px');
            $(this.el).css('left', this.model.get('position_x')+'px');
            return this;
        },
        unrender: function() {
            $(this.el).remove();
        },     
        remove: function() {
            this.model.destroy();
        }   
    });
    
    var atomi;
    
    var CommentsView = Backbone.View.extend({
        el: $('body'),
        events: {
            'click div.Add_Atomi_Button':'addAtomOverlay',
            'click div.Add_Atomi_Overlay':'addAtom'
        },
        initialize: function() {
            _.bindAll(this, 'render', 'addAtom', 'appendAtom');
            
            //this.collection = new Atomi();
            //this.collection.bind('add', this.appendAtom);
            atomi = new Atomi();
            atomi.bind('add', this.appendAtom);
            
            this.counter = 0;
            this.render();
        },
        render: function() {
           // $(this.el).append("<button id='add'>Add Atom</button>");
            $(this.el).append("<div class='Atom_List_View'></div>");
            //_(this.collection.models).each(function(atom) {
            _(atomi.models).each(function(atom) {
                appendAtom(atom);
            }, this);
        },
        addAtom: function(e) {
            $('.Add_Atomi_Overlay').fadeOut(10);
            $('.Add_Atomi_Overlay').remove();
            $('.Add_Atomi_Button').html('+');
            
            this.counter++;
            var atom = new Atom();
            atom.set({
                position_x: e.pageX,
                position_y: e.pageY,
                user_id: this.counter,
                comment: "Comment_"+this.counter,
                timestamp: new Date(e.timeStamp)
            });
            
            ajaxFunction(atom.get('user_id'), '1', atom.get('comment'), atom.get('position_x'), atom.get('position_y'));

            
            //this.collection.add(atom);
            atomi.add(atom);
        },
        addAtomOverlay: function() {
            if($('.Add_Atomi_Overlay').length > 0) {
                $('.Add_Atomi_Overlay').fadeOut('fast').delay(400);
                $('.Add_Atomi_Button').html('+');
                $('.Add_Atomi_Overlay').remove();
                
            } else {
                var overlay = jQuery('<div class="Add_Atomi_Overlay"> </div>');
                overlay.appendTo(document.body);
                overlay.hide();
                overlay.fadeIn('fast');
                $('.Add_Atomi_Button').html('-');
            }
        },
        appendAtom: function(atom) {
            var atomView = new AtomView({
                model: atom
            });
            $('div.Atom_List_View', this.el).append(atomView.render().el);
        }
    });
    
    var commentsView = new CommentsView();
    
    
    <!-- 
    //Browser Support Code
    function ajaxFunction(uid, wid, com, px, py){
        var ajaxRequest;  // The variable that makes Ajax possible!
        
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                alert(ajaxRequest.responseText);
                
            }
        }
        
        var qString = "?uid=" + uid + "&wid=" + wid + "&com=" + com + "&px=" + px + "&py=" + py;
        ajaxRequest.open("GET", "front.php" + qString, true);
        ajaxRequest.send(null);
    }
    //-->
;

   <!-- 
    //Browser Support Code
    function ajaxFunction2(){
        var ajaxRequest;  // The variable that makes Ajax possible!
        
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){                
                alert(ajaxRequest.responseText);
            }
        }
        
        ajaxRequest.open("GET", "getComments.php", true);
        ajaxRequest.send(null);
    }
    //-->
;
ajaxFunction2();

    
})(jQuery);